<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>歌曲列表</h1>
    <ul class="ul">
    </ul>
    <script>
        // 封装作为一个共用的函数
        function getXHR(url) {
            var oAjax = new XMLHttpRequest();
            oAjax.open('get', url)
            oAjax.send();
            oAjax.onreadystatechange = function () {
                // debugger
                if (oAjax.readyState == 4) {
                    if (oAjax.status == 200) {
                        var res = JSON.parse(oAjax.responseText);
                        // console.log(111, res);
                        // 歌曲列表
                        var list = res.result;
                        var oUl = document.querySelector('.ul');
                        for (var i = 0; i < list.length; i++) {
                            // 创建元素
                            var oLi = document.createElement('li');
                            var oImg = document.createElement('img');
                            var oSpan = document.createElement('span');
                            var oBtn = document.createElement('button');
                            // 给图片添加属性
                            oImg.src = list[i].picUrl;
                            oImg.width = 100;
                            // 歌曲名称
                            oSpan.innerHTML = list[i].name;
                            // 播放按钮
                            oBtn.innerHTML = '播放';
                            // 添加到li元素中
                            oLi.appendChild(oImg);
                            oLi.appendChild(oSpan);
                            oLi.appendChild(oBtn);
                            oUl.appendChild(oLi)
                        }
                    }

                }
            }
        }
        window.onload = function () {
            getXHR('http://localhost:3000/personalized/newsong');
        }
    </script>
</body>

</html>